<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import useMemberStore from "@/pinia/memberStore.ts";
import {storeToRefs} from "pinia";


const memberStore = useMemberStore()

const {userInfo, certificatesType} = storeToRefs(memberStore)
const formRef = ref(null)
const uploadRef = ref(null)
const loading = ref(true)
const showDialog = ref(false)
const formData = reactive({
  name: "",
  certificatesNo: "",
  certificatesType: "",
  certificatesUrl: "",
})
const fetchUserInfo = async () => {
  try {
    await memberStore.fetchUserInfo()
  } catch (error) {
    ElMessage.error(error.message)
  }finally {
    loading.value=false
  }
}

const findByDictCode = async () => {
  try {
    await memberStore.findByDictCode("CertificatesType")
  } catch (error) {
    ElMessage.error(error.message)
  }
}


const handleExceed = () => {
  ElMessage.warning("只能上传一张图片")
}
const handleSuccess = (response, file, files) => {
  if (response.code === 200) {
    formData.certificatesUrl = response.data
    ElMessage.success("上传图片成功")
  } else {
    ElMessage.error("上传图片失败")
    uploadRef.value.clearFiles()
  }
}

const handleRemove = (file) => {
  formData.certificatesUrl = ""
}

const handlePreview = (file) => {
  showDialog.value = true
}

const handleSubmit = async () => {
  try {
    const message = await memberStore.userCertation(formData)
    await fetchUserInfo()
    ElMessage.success(message)
  } catch (error) {
    ElMessage.error(error.message)
  }
}

const handleReset = () => {
  formData.certificatesUrl = ""
  formData.certificatesNo = ""
  formData.certificatesType = ""
  formData.name = ""
  uploadRef.value.clearFiles()
}

onMounted(() => {
  fetchUserInfo()
  findByDictCode()
})
</script>

<template>
  <div class="cert" v-loading="loading" element-loading-text="数据加载中"  element-loading-background="rgb(255, 255, 255)">
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <el-link type="primary">实名信息</el-link>
        </div>
      </template>
      <div class="card-body">
        <div class="tip">
          <el-alert title="完成实名认证才能添加就诊人信息" type="info" show-icon :closable="false"/>
        </div>
        <div class="desc" v-if="userInfo.authStatus===1">
          <el-descriptions class="margin-top" :column="1" border>
            <el-descriptions-item>
              <template #label>用户姓名</template>
              {{ userInfo.name || "未知姓名" }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>证件类型</template>
              {{ userInfo.certificatesType === "10" ? "身份证" : "户口本" }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>证件号码</template>
              {{ userInfo.certificatesNo || "未知的证件号码" }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="form" v-else>
          <el-form label-width="100px" :model="formData" ref="formRef">
            <el-form-item label="用户姓名">
              <el-input placeholder="请输入用户姓名" v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="证件类型">
              <el-select v-model="formData.certificatesType" placeholder="请选择证件类型">
                <el-option v-for="(item) in certificatesType" :value="item.value" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input placeholder="请输入证件号码" v-model="formData.certificatesNo"></el-input>
            </el-form-item>
            <el-form-item label="上传证件">
              <el-upload ref="uploadRef" list-type="picture-card" action="api/oss/file/fileUpload?fileHost=userAuah" :limit="1" :on-exceed="handleExceed" :on-success="handleSuccess" :on-preview="handlePreview" :on-remove="handleRemove">
                <el-icon>
                  <Plus/>
                </el-icon>
              </el-upload>
              <el-dialog v-model="showDialog" width="30%">
                <img w-full alt="Preview Image" :src="formData.certificatesUrl" style="width: 500px;" v-if="formData.certificatesUrl"/>
              </el-dialog>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleReset">重置</el-button>
              <el-button type="primary" @click="handleSubmit">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.cert {
  .desc {
    .el-descriptions {
      margin: 10px 0;
    }
  }

  .form {
    display: flex;
    justify-content: center;
    margin-top: 10px;

    .el-form {
      width: 50%;

      .el-select {
        width: 100%;
      }
    }
  }

  :deep(.el-dialog__body) {
    display: flex;
    justify-content: center;
  }
}
</style>
